<template>
  <div>
    编辑英雄
    <br>
    <br>
    <span>英雄名称：</span>
    <input type="text" v-model="name" >
    <br>
    <br>
    <span>性  别：</span>
    <!-- 只要input中v-model绑定同一个属性 (例如:gender) 就会实现单选  -->
    <input type="radio" value="男" v-model="gender"> 男
    <input type="radio" value="女" v-model="gender"> 女
    <br>
    <br>
    <button type="button" class="btn btn-success" @click="EditList">确定</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      gender:'',
      name:''
    }
  },
  methods:{
    // 获取该id列表
    getList(){
      let id = this.$route.query.id
      this.$http.get(`http://localhost:6005/heroList/${id}`)
      .then((res) => {
        // console.log(res);
        this.name = res.data.name
        this.gender = res.data.gender
      })
    },
    // 修改数据
    EditList() {
      let id = this.$route.query.id
      this.$http.put(`http://localhost:6005/heroList/${id}`,{
        gender : this.gender,
        name : this.name,
        time: new Date()
      }).then((res) => {
        this.$router.push({
          path:'/HeroList'
        })
      })
      
    }
  },
  mounted(){
    this.getList()
  }
}
</script>

<style>

</style>